<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<title>动态</title>
		<link rel="stylesheet" type="text/css" href="../css/aui.css" />
    	<link rel="stylesheet" type="text/css"   href="../css/mui.min.css" />
		<style>
			body{
				background: #fff;
				font-size: 14px;
			}
			header{
				position: fixed !important;
				top:0;
				width: 100%;
				z-index: 99;
				background: #fff;
			}
			.aui-tab{
				padding:8px 0;
			}
			#yanse li.active{
				color: #327afa;
			    border-bottom: 2px #327afa solid;
			}
			.divHeader{
				width:40%;
				margin:0 auto;
			}
			.dongtai ul{
				background: #e8e8e8;
			}
			.dongtai .aui-list-view .aui-img-object{
				max-width: 40px;
				height: 40px;
			}
			.aui-list-view .aui-img-object.aui-pull-left{
				margin-right: 10px;
			}
			.aui-list-view-cell{
				margin-bottom: 15px;
				background: #fff;
				margin-top: 8px;
			}
			.aui-img-body{
				float: left;
				max-width: 195px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.remenType ul{
				background: #fff;
			}
			.aui-list-view:after{
				border:none;
			}
			.type{
				font-size: 12px;
				background: #feb77e;
				color:#fff;
				padding: 4px 5px;
			}
			.title{
				width: 100%;
				display: inline-block;
				margin: 6px;
			}
			.conttent img{
				width: 31%;
				margin-left:2%;
				float: left;
				margin-top: 8px;
			}
			.shoucang{
				text-align: center;
			}
			/*热门*/

			.remenType{
				/*display: none;*/
				padding:0 12px;
			}
			.remenType li{
				font-size: 14px;
				position: relative;
			}
			.remenType li:last-of-type:before{
				content: "";
				position: absolute;
				width: 1px;
				height: 80%;
				background: #e8e8e8;
				left: 4px;
				top:10%;
			}
			/**更多类别*/
			.moreType{
				display: none;
				position: fixed;
				top:0px;
				background: #fff;
				padding-bottom: 20px;
				z-index: 999;
			}
			.moreType .aui-arrow-right:after{
				content: "\e6de";
			}
			.moreType .aui-list-view-cell{
				margin-top:0;
			}
			.moreList{
				padding: 0 15px;
			}
			.moreList ul li{
				text-align: center;
				padding: 3px;
				border-radius: 5px;
				margin-bottom: 10px;
				border:1px solid #ececec;
				font-size: 13px;
				width:22%;
				float: left;
				margin-right:3%;

			}
			.moreList ul li.active{
				color:white;
				background: #327afa;
			}
			#yanse li{
				float: left;
				margin-right:30px;
			}
			.spanMoreType{
				position: absolute;
				right:0;
				display: block;
				background: #fff;
				padding:2px 5px;
			}
			.h0{
				height: 0;
			}
		</style>
	</head>
	<body>
		<div class="contain dongtai" >
			<div class="remenType h0">
				<div class="aui-tab" id="yanse">
				    <ul class="" >
				        <li class="active"  data-type="2" tapmode onclick="switchChange2(3,this)">纺织印刷</li>
				        <li  data-type="2" tapmode onclick="switchChange2(4,this)">纺纱厂</li>
				        <li  data-type="2" tapmode onclick="switchChange2(5,this)">织布厂</li>
				        <li  data-type="2" tapmode onclick="switchChange2(6,this)">印染厂</li>
				        <li  data-type="2" tapmode onclick="switchChange2(7,this)">织带厂</li>
				        <li  data-type="2" tapmode onclick="switchChange2(6,this)">印染厂</li>
				        <li  data-type="2" tapmode onclick="switchChange2(7,this)">织带厂</li>
				        <li  data-type="2" tapmode onclick="switchChange2(6,this)">印染厂</li>
				        <li  data-type="2" tapmode onclick="switchChange2(7,this)">织带厂</li>
				    </ul>
				    <span class="spanMoreType"   data-type="2" tapmode ><i class="aui-iconfont aui-icon-unfold getMoreType"></i></span >
				</div>
			</div>
			<ul class="aui-list-view">
				<li class="aui-list-view-cell aui-img">
		            <img class="aui-img-object aui-pull-left" src="../image/dongtai.jpg">
		            <div class="aui-img-body">
		                佛山甘洋商贸有限责任公司
	                <p><span class="time">10:05</span>  浏览<span class="sum">48</span></p>
		            </div>
		            <div class="shoucang aui-pull-right"><span class="type">收藏</span><p>2202人</p></div>
		            <div class="title">08月20日本店折扣商品不织布08月20日本店折扣商品不织布08月20日本店折扣商品不织布08月20日本店折扣商品不织布08月20日本店折扣商品不织布</div>
		            <div class="conttent">
		            	<img src="../image/dongtai1.jpg" >
		            	<img src="../image/dongtai1.jpg" >
		            	<img src="../image/dongtai1.jpg" >
		            	<img src="../image/dongtai1.jpg" >
		            	<img src="../image/dongtai1.jpg" >
		            	<img src="../image/dongtai1.jpg" >
		            </div>
		        </li>
				<li class="aui-list-view-cell aui-img">
		            <img class="aui-img-object aui-pull-left" src="../image/dongtai.jpg">
		            <div class="aui-img-body">
		                佛山甘洋商贸有限责任公司
	                <p><span class="time">10:05</span>  浏览<span class="sum">48</span></p>
		            </div>
		            <div class="shoucang aui-pull-right"><span class="type">收藏</span><p>2202人</p></div>
		            <div class="title">08月20日本店折扣商品不织布08月20日本店折扣商品不织布08月20日本店折扣商品不织布08月20日本店折扣商品不织布08月20日本店折扣商品不织布</div>
		            <div class="conttent">
		            	<img src="../image/dongtai1.jpg" >
		            	<img src="../image/dongtai1.jpg" >
		            	<img src="../image/dongtai1.jpg" >
		            	<img src="../image/dongtai1.jpg" >
		            	<img src="../image/dongtai1.jpg" >
		            	<img src="../image/dongtai1.jpg" >
		            </div>
		        </li>
			</ul>
		</div>
		<div class="moreType">
			<ul class="aui-list-view">
		        <li class="aui-list-view-cell">
		            <div class="aui-arrow-right">选择分类</div>
		        </li>
		    </ul>
			<div class="moreList">
				<ul>
					<li class=" active">纺织印刷</li>
					<li class="">纺纱厂</li>
					<li class="">织布厂</li>
					<li class="">印染厂</li>
					<li class="">纺织印刷</li>
					<li class="">纺织印刷</li>
					<li class="">纺织印刷</li>
				</ul>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../script/api.js" ></script>
	<script type="text/javascript" src="../script/doT.min.js"></script>
	<script type="text/javascript" src="../script/echo.js"></script>
	<script type="text/javascript" src="../script/common.js"></script>
	<script type="text/javascript" src="../script/myInfo.js"></script>
	<script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
	<script type="text/javascript" src="../script/mui.min.js"></script>
	<script type="text/javascript" src="../script/iscroll.js"></script>
	<script type="text/javascript">
		apiready = function() {
			api.parseTapmode();
			// getData();
			// 水平滚动
    		
			api.setRefreshHeaderInfo({
				visible : true,
				loadingImg : 'widget://image/ptr_pull.png',
				bgColor : '#efeff4',
				textColor : '#959595',
				textDown : '下拉刷新',
				textUp : '松开刷新',
				showTime : true
			}, function(ret, err) {
				page = 1;
				getData();
				api.refreshHeaderLoadDone();
			});
			//重新登录监听
			api.addEventListener({
				name : 'reGetMyInfo'
			}, function(ret) {
				if (ret && ret.value) {
					page = 1;
					getData();
				}
			});
		}
		$(function(){
		    //颜色宽度
		    $("#yanse ul").width(getWidth());
		    // 水平滚动
		    loadHorScroll ();
		})
		// 水平滚动
		var myScroll;
		function loadHorScroll () {
		    myScroll = new IScroll('#yanse', {
		    scrollX: true,
		    scrollY: false,
		    mouseWheel: true ,
		    vScroll: false,
		    click:true,
		    beforeScrollStart: function (e) {
		           if ( this.absDistX > (this.absDistY + 5 ) ) {
		               // user is scrolling the x axis, so prevent the browsers' native scrolling
		               e.preventDefault();
		           }
		        }
		   });
		}

		// 计算水平滚动的宽度
		function getWidth(){
		    var height=0;
		    $("#yanse").find("li").each(function(){
		        height+=$(this).outerWidth(true);
		    }) 
		    return height;
		}
		var mask = mui.createMask(hideType);//callback为用户点击蒙版时自动执行的回调；
		// 处理热门和动态的切换,同时获取数据
		//type:想要获取数据的类别，obj当前单击的对象
		//type最好直接是分类的id，直接可以获取数据
		function switchChange2(type,obj){
			// 改变选择状态
			changeCheck(obj);
			var dataType=$(obj).attr("data-type");
			switch(dataType){
				case "1":
					// $(".remenType").css({"display":"none"});
					$(".remenType").addClass("h0");
					//getData();
					break;
				case "2":
					// $(".remenType").css({"display":"block"});
					$(".remenType").removeClass("h0");
					//getData();
					break;
			}
		}
		// 处理热门和动态的切换,同时获取数据
		//type:想要获取数据的类别，obj当前单击的对象
		//type最好直接是分类的id，直接可以获取数据
		function switchChange(type){
			// 改变选择状态
			// changeCheck(obj);
			// var dataType=$(obj).attr("data-type");
			switch(type){
				case "1":
					$(".remenType").addClass("h0");
					//getData();
					break;
				case "2":
					$(".remenType").removeClass("h0");
					//getData();
					break;
			}
		}
		//为了在下面的热门类别可以通用，单独出来
		function changeCheck(obj){
			$(obj).parent().find("li").removeClass("active");
			$(obj).addClass("active");
		}
		//热门更多时候的选择  
		$(".moreList ul li").click(function(){
			changeCheck(this);
		})
		// 显示更多类别
		$(".getMoreType").click(function(){
			$(".moreType").css({"display":"block"})
			mask.show();//显示遮罩
		})
		// 隐藏更多类别
		$(".moreType .aui-arrow-right").click(function(){
			hideType();
			mask.close();

		})
		//隐藏更多分类和遮罩
		function hideType(){
			$(".moreType").css({"display":"none"});
		}
	</script>
</html>